<template>
    <div class="gooddetail">
        <div class="head-nav">
            <router-link to="/cart">
                <span class="car">
                    <img src="../nine/images/car.png">
                </span>
            </router-link>
            <router-link to="/home">
                <span class="home_nav" >
                    <img src="../nine/images/home_nav.png">
                </span>
            </router-link>
        </div>
        <div class="xing">
            <div class="main_visual" >
                <div class="lun">
                    <swiper :options="swiperOption"  ref="mySwiper" style="width:320px;height:320px;" >
                        <swiper-slide class="main_image" v-for="pic in allData.image_urls_head" :key="pic.id">
                            <img :src="pic" style="width:100%;height:100%;" />
                        </swiper-slide>
                        <!-- 这是轮播的小圆点 -->
                        <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                </div>
                <div class="s_info">
                    <span v-text="'￥'+ allData.sales_price" class="nine-newprice"></span>
                    <div class="price-rt">
                        <p v-text="'￥'+allData.original_price" class="nine-oldprice"></p>
                        <p v-text="allData.buy_num+'个人购买'" class="buy-count"></p>
                    </div>
                </div>
                <p class="nine-tit">{{allData.title}}</p>
                <div class="bgFFF"></div>
                <div class="counponShow">
                    <i class="dian" >店铺优惠券({{coupon.count}})</i>
                    <span class="man" v-for="p in coupon.list">{{p.coupon_description}}</span>
                </div>
                <div class="host">
                    <span class="pho">
                        <img :src="shopInfo.shop_header">
                    </span>
                    <div class="adress">
                        <p class="adr1" v-text="shopInfo.cn_name"></p>
                        <p class="adr2" v-text="shopInfo.delivery"></p>
                    </div>
                    <ul class="service">
                        <li class="bigwd" v-for="k in serviceInfo.service_list"><p class="item fw_wd" v-text="k.desc"></p></li>
                    </ul>
                </div>
                <div class="intr1">
                <div class="intr" v-for="b in allData.special_list">
                    <p v-text="b.specialInfo.title"></p>
                </div></div>
                <div class="pro-intr">
                    <swiper :options="swiperOption"  ref="mySwiper">
                         <swiper-slide >
                            <div class="pro" v-for="m in allData.special_list">
                                <dl v-for="(l,index) in m.productList" v-if="index<3">
                                    <dt><img :src="l.imgUrl"/></dt>
                                    <dd class="ft1-pri"><p v-text="l.newPrice"></p></dd>
                                    <dd class="wordall"><h2 v-text="l.title"></h2></dd>
                                </dl>
                            </div>
                        </swiper-slide>
                         <swiper-slide >
                             <div class="pro" v-for="m in allData.special_list">
                                <dl v-for="(l,index) in m.productList" v-if="index>=3&&index<6">
                                    <dt><img :src="l.imgUrl"/></dt>
                                    <dd class="ft1-pri"><p v-text="l.newPrice"></p></dd>
                                    <dd class="wordall"><h2 v-text="l.title"></h2></dd>
                                </dl>
                            </div>
                        </swiper-slide>
                        <swiper-slide>
                             <div class="pro" v-for="m in allData.special_list">
                                <dl v-for="(l,index) in m.productList" v-if="index>=6&&index<9">
                                    <dt><img :src="l.imgUrl"/></dt>
                                    <dd class="ft1-pri"><p v-text="l.newPrice"></p></dd>
                                    <dd class="wordall"><h2 v-text="l.title"></h2></dd>
                                </dl>
                            </div>
                        </swiper-slide>
                        <!-- 这是轮播的小圆点 -->
                        <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                </div>
                <div class="all">
                    <span class="all-pro1">全部商品</span>
                    <span class="all-pro2">进入店铺</span>
                </div>
                <div class="bg1" style="width:100%;height:10px;background-color:#EEEEEE;"></div>
                <!--详情，评价，推荐-->
                <div class="speak">
                     <div class="speak_top">
                        <ul>
                            <li><a href="javascript:;" @click='tabToggle(tab01Text);'>详情</a></li>
                            <li><a href="javascript:;" @click='tabToggle(tab02Text);'>评价({{comment.total_num}})</a></li>
                            <li><a href="javascript:;" @click='tabToggle(tab03Text);'>推荐</a></li>
                        </ul>
                    </div>
                    <div class="speak_bottom">
                        <component :is='currentView'  :proData="a.infoList" :proInfo="b.image_text_array" :comm="c.comment_list" :comList="e" :description="descriptionImg" keep-alive></component>
                    </div>
                </div>
                <!--详情，评价，推荐结束-->
                <div class="p_buy">
                    <div class="tel1">
                        <router-link to="/serv" :title="allData.productTitle" :price="n">
                            <div class="tel" >
                                <span class="pho2"><img src="../nine/images/kefu.png"></span>
                                <p>客服</p>
                            </div>
                        </router-link>
                    </div>
                    <div class="gblue" @click="play()">加入购物车</div>
                    <div class="quic">
                       <!--  <router-link to="/pay"> -->
                            <div class="quick"  @click="play1()">立即购买</div>
                        <!-- </router-link> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 加入购物车 -->
        <div class="add-car" v-show="flag" >
            <div class="zip"></div>
                <div class="conten">
                    <span id="close" @click="del()">
                        <img src="../nine/images/close.png" />
                    </span>
                    <div class="chat">

                        <span >
                            <img v-for="(m,index) in allData.image_urls_head" v-if="index==0" :src="m"/>
                        </span>
                        <div class="rig">
                            <p class="tit-name" v-text="allData.productTitle"></p>
                            <p class="pri-sal">￥{{allData.low_price}}</p>
                        </div>
                    </div>
                    <!-- 内部滚动 -->
                    <div class="box">
                        <div class="model" v-for="(h,i) in allData.attr_keys"  v-if="i==0">
                            <p class="model-name">选择{{h.name}}</p>
                            <span v-for="(g,itemIndex) in h.attr_values" :class="{specs_activity: itemIndex == specsIndex}" @click="chooseSpecs(itemIndex, g.name)">{{g.name}}</span>
                        </div>
                        <div class="model" v-for="(h,i) in allData.attr_keys"  v-if="i==1">
                            <p class="model-name">选择{{h.name}}</p>
                            <span v-for="(g,itemIndex) in h.attr_values" :class="{specs_activity: itemIndex == choIndex}" @click="chooseSpe(itemIndex, g.name)">{{g.name}}</span>
                        </div>

                        <p class="buy-num">购买数量</p>
                        <div class="calu">
                            <span class="calu-num" @click="reduceCount()">-</span>
                            <span class="count-num" v-text="num"></span>
                            <span class="calu-num" @click="addCount()">+</span>
                        </div>
                    </div>
                    <!-- 结束 -->
                    <div class="sure">
                        <button class="btn" :class="{'btn2':flag6&&flag7}" @click="addCart(allData), del1()" v-if="addToCart">确定</button>
                        <button class="btn" :class="{'btn2':flag6&&flag7}" @click="buyNow (allData)" v-if="toBuy">确定</button>
                    </div>
                </div>
        </div>
    </div>
</template>
<script >
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import tab01 from "./pro_details"
    import tab02 from "./pro_comment"
    import tab03 from "./more"
    var goodslist = JSON.parse( sessionStorage.getItem('goodslist') )|| [];
    export default {
        components: {
            swiper,
            swiperSlide,
            tab01:tab01,
            tab02:tab02,
            tab03:tab03
        },
        data (){
            return {
                id:this.$route.params.id,
                allData:[],
                shopInfo:[],
                serviceInfo:[],
                comment:[],
                a:[],
                b:[],
                c:[],
                e:[],
                m:[],//给客服页面传商品名称
                n:[],//给客服页面传商品价格
                flag:false,
                coupon:[],
                specsIndex: -1, //当前选中的规格索引值
                choIndex:-1,
                flag6:false,
                flag7:false,
                descriptionImg:[],
                swiperOption: {
                    notNextTick: true,
                    pagination: '.swiper-pagination',
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    paginationClickable: true,
                    spaceBetween: 30,
                        onSlideChangeEnd: swiper => {
                            //这个位置放swiper的回调方法
                            this.page = swiper.realIndex+1;
                            this.index = swiper.realIndex;
                        },
                },
                swiperSlides: [1, 2, 3, 4, 5],
                tab01Text:'tab01',
                tab02Text:'tab02',
                tab03Text:'tab03',
                currentView:'tab01',
                count: '',
                addToCart: false,
                toBuy: false,
                num: 1,
                po:[]
            }
        },
        //定义这个sweiper对象
        computed: {

            swiper() {
              return this.$refs.mySwiper.swiper;
          },
            mounted () {
                //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
                this.swiper.slideTo(0, 0, false);
            }
        },
        created (){
            let id = this.id;
            this.$http.get('../../static/list/'+id+'.json')
            .then(data => {
                var result = data.data.data;
                this.allData = result.product;
                this.allData.count = 1;
                this.shopInfo=this.allData.shop_info;
                this.serviceInfo = this.allData.service_info_new;
                this.comment = this.allData.best_comment;
                this.a = this.allData.productSummaryInfo;
                this.b = this.allData.simple_edit_info;
                this.c = this.allData.best_comment;
                this.e = data.data.data.faillist;
                this.coupon = data.data.data.coupon_tmpl;
                this.descriptionImg = this.allData.descriptionImgJson;
                this.m = this.allData.title;
                this.n = this.allData.low_price;
                this.po = this.allData.attr_keys;
            },err => {
                console.log(err);
            });
            this.toTop();
        },
        methods:{
            back (){
                history.back();
            },
            tabToggle:function(tabText){
                this.currentView=tabText
            },
            toTop () {
                window.scrollTo(0,0);
            },
            del () {
                this.flag = false;
            },
            del1 () {
                if (this.flag6 && this.flag7) {
                    this.flag = false;
                }
            },
            play () {
                this.addToCart = true;
                this.toBuy = false;
                this.flag = true;
                this.judge();
            },
            play1 () {
                this.toBuy = true;
                this.addToCart = false;
                this.flag = true;
                this.judge();
            },
             //记录当前所选规格的索引值
            chooseSpecs(index, g){
                this.allData.size = g;
                this.specsIndex = index;
                this.flag6 = true;
                console.log(this.allData.count);
            },
            chooseSpe(index, g){
                // console.log(this.allData)
                this.allData.thisColor = g;
                this.choIndex = index;
                this.flag7 = true;
                console.log(this.allData.count);
            },
            addCount () {
                this.num ++;
                this.allData.count = this.num;
                // return this.allData;
            },
            reduceCount () {
                if (this.num >= 2) {
                    this.num --;
                    this.allData.count = this.num;
                    // console.log(this.allData);
                    // return this.allData;
                }
            },
            addCart (allData) {
                goodslist = JSON.parse( sessionStorage.getItem('goodslist') )|| [];
                if (this.flag6 && this.flag7) {
                    var flagg = false;
    				allData.isCheck = false;
    				for (var i = 0; i < goodslist.length; i++) {
    					if (allData.size == goodslist[i].size && allData.thisColor == goodslist[i].thisColor && allData.product_id == goodslist[i].product_id) {
    						goodslist[i].count += allData.count;
    						flagg = true;
    					}
    				}
    				if (flagg == false) {
    				    goodslist.push(allData);
    				}
    				sessionStorage.setItem("goodslist", JSON.stringify(goodslist));
                }
            },
            buyNow (allData) {
                for (var i = 0; i < goodslist.length; i ++) {
                    if (goodslist[i].buyNow) {
                        goodslist.splice(i, 1)
                    }
                }
                allData.buyNow = true;
                allData.isCheck = true;
                goodslist.push(allData);
                sessionStorage.setItem("goodslist", JSON.stringify(goodslist));
                window.location = "#/pay"
                // console.log(sessionStorage);
            },
            judge () {
                // console.log(this.po);
                if(this.po.length < 2 && this.po.length > 0){
                    this.flag7 = true;
                }
                if(this.po.length == 0){
                    this.flag7 = true;
                    this.flag6 = true;
                }
            }
        }
    }
</script>

<style scoped>
.btn2{
    color:#fff!important;
    background: #fe3355!important;
}
.specs_activity{
    color: #fe5164!important;
    border: solid 1px #fe5164!important;
}
/*商品*/
.add-car{
   width: 100%;
}
.zip{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.7);
    z-index: 120;
}
.chat{
    background-color: #fff;
    padding-top: 10px;
    border-bottom: solid 1px #DDD;
}
.chat>span{
    width: 5rem;
    height: 5rem;
    display: inline-block;
    margin-left: 10px;
}
.chat>span>img{
    width: 100%;
}
.chat>.rig{
    display: inline-block;
    width: 17.08rem;
    min-height: 5rem;
    vertical-align: top;
    margin-left:10px;
}
.chat>.rig>.tit-name{
    width: 100%;
    padding-bottom: 3px;
    line-height: 1.5rem;
    color: #666;
    font-size: 1.2rem;
}
.chat>.rig>.pri-sal{
    font-size: 1.3rem;
    color: #fe3355;
    line-height: 1.83rem;
    margin-top: 5px;
}
/*加入购物车*/
#close{
    width: 1.5rem;
    height: 1.5rem;
    display:block;
    float:right;
    margin: 10px 10px 0 0;
}
#close>img{
    width: 1.5rem;
    height: 1.5rem;
}
.sure{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px 0 ;
    border-top: solid 1px #DDD;
    background: #FFF;
    z-index: 70;
    text-align:center;
}
.sure>.btn{
    width: 18.67rem;
    height: 2.5rem;
    text-align:center;
    line-height: 2.5rem;
    background: #CCC;
    color: #FFF;
    border-color: #CCC;
    border:none;
    border-radius: 3px;
    margin:auto;
    font-size: 1.3rem;
    outline: none;
}
.add-car{
    width: 100%;
}
.box{
    height: 27.08rem;
    overflow-y:scroll;
}
.conten{
    position: fixed;
    width: 100%;
    left: 0;
    top: 20%;
    height: 90%;
    background: #FFF;
    z-index: 200;
    background-color: #fff;
}
.conten .model-name{
    color: #444;
    font-size: 1.3rem;
    margin-bottom: 6px;
}
.conten .model{
    border-bottom: solid 1px #EEE;
    width: 92%;
    padding: 6px 10px 8px 15px;
}
.conten >.box >.model>span{
    min-width: 10%;
    margin: 5px 3px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    padding: 4px 10px;
    border: solid 1px #EEE;
    cursor: pointer;
    color: #999;
    background: #fff;
    font-size: 1.3rem;
}
.conten>.box>.buy-num{
    color: #444;
    font-size: 1.3rem;
    width: 94%;
    height: 2.25rem;
    margin:10px auto;
}
.conten>.box>.calu{
    width: 94%;
    margin:0px auto;
    height: 30px;
    margin-bottom: 10px;
}
.conten>.box>.calu>.calu-num{
    width: 2.5rem;
    height: 2.33rem;
    line-height: 2.33rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    background: #FFF;
    color: #aaa;
    display: inline-block;
    border: solid 1px #CCC;
    border-radius: 3px;
}
.conten>.box>.calu>.count-num{
    width: 3.33rem ;
    height: 2.33rem;
    display: inline-block;
    font-weight: bold;
    line-height: 2.33rem;
    margin: 0 3px;
    text-align: center;
    border: solid 1px #CCC;
    color: #333;
    background: #fff;
    font-size: 1.1rem;
    vertical-align: top;
}
.speak{
    width: 100%;

}
.speak>.speak_top{
    border-bottom: solid 1px #ddd;
    border-top: solid 1px #EEE;
    height: 3.67rem;
}
.speak>.speak_top ul li{
    width: 33.3%;
    height: 3.67rem;
    line-height: 3.67rem;
    text-align: center;
    font-size: 1.35rem;
    float: left;
}

.pro-intr{
    width: 100%;
}
.pro{
    width: 93%;
    margin-left: 10px;
}
.pro:after{
    content: '';
    height: 0;
    display: block;
    clear: both;
}
.pro>dl{
    width: 8.25rem ;
    height: 13.33rem;
    float: left;
}
.pro>dl>dt{
    width: 7.42rem;
    height: 7.42rem;
}
.pro>dl>dt>img{
    width: 100%;
    height: 100%；
}
.pro>dl>.ft1-pri{
    color: #fe3355;
    font-size: 1.2rem;
    line-height: 1.83rem;
    height: 1.83rem;
    width: 7.42rem;
    text-align: center;
}
.pro>dl>.wordall>h2{
    color: #444;
    font-size: .6rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 1.5rem;
    line-height: 1.5rem;
}
.intr{
    width:95%;
    height:1px;
    border-top: solid 1px #EEE;
    margin:0px auto;
    position: relative;
}
.intr1{
    height: 1.67rem;
}
.intr>p{
    color: #444;
    font-size: 1.1rem;
    position: absolute;
    height: 1.58rem;
    margin-left: 9.58rem;
    top: -11px;
    z-index: 10;
    background-color:#fff;
}
.head-nav{
    width: 8.75rem;
    height: 3.33rem;
    position: absolute;
    z-index: 15;
    right:0;
    top: 10px;

}
.head-nav>span{
    width: 3.33rem;
    height: 3.33rem;
    display: inline-block;
}
.head-nav>span>img{
    width: 3.33rem;
    height: 3.33rem;
}
.car{
    width: 3.33rem;
    height: 3.33rem;
    display: inline-block;
}
.car>img{
    width: 3.33rem;
    height: 3.33rem;
}
.home_nav{
    width: 3.33rem;
    height: 3.33rem;
    display: inline-block;
}
.home_nav>img{
    width: 3.33rem;
    height: 3.33rem;
}
.gooddetail,.xing{
    width: 100%;
}
.main_visual{
    width: 100%;
}
.main_visual>.main_image{
    width: 100%;
    height: 26.67rem;
}
.main_visual>.main_image>img{
    width: 100%;
    height: 100%;
}
.main_visual>.s_info{
    width: 96%;
    height: 3.67rem;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
.main_visual>.s_info>.nine-newprice{
    width:48% ;
    height: 2.83rem;
    display: inline-block;
    border-right: solid 1px #bbb;
    padding-right: 10px;
    line-height: 2.67rem;
    font-size: 1.9rem;
    color: #fe3355;
    text-align: right;
}
.main_visual>.lun{
    width: 100%;
    height: 26.67rem;
}
/*.main_visual>.lun img{
    width: 100%;
    height: 100%;
}*/
.main_visual>.s_info>.price-rt{
    width:48% ;
    height: 2.83rem;
     color: #AAA;
     padding-left: 10px
}
.main_visual>.s_info>.price-rt>.nine-oldprice{
     text-decoration: line-through;
     font-size: 1.0rem;
     line-height: 1.5rem;
}
.main_visual>.s_info>.price-rt>.buy-count{
    font-size: 1.2rem;
    line-height: 1.33rem;
}
.main_visual>.nine-tit{
    width:90%;
    height: 1.58rem;
    margin:10px auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
     color: #444;
     font-size: 1.1rem;
     text-align: center;
     line-height: 1.58rem;
}
.main_visual>.main_visual{
    width: 100%;
    height:10px ;

}
.main_visual>.main_visual>.bgFFF{
    height: 10px;
    background-color: #FFF;
    margin-bottom: 10px;
}
.main_visual>.counponShow{
    width: 96%;
    height: 4.33rem;
    /*margin: 0 5px 10px;*/
    border-top: solid 1px #ffcc01;
    /*padding: 10px 0;*/
    border-bottom: solid 1px #EEE;

    background-size:5.17rem 2.5rem;
    margin-top: 3.33rem;
}
.main_visual>.counponShow>.dian{
    height: 4.33rem;
    font-size: 1.0rem;
    display: inline-block;
    line-height: 4.33rem;
    padding-left: 10px;
}
.main_visual>.counponShow>span{
    display: inline-block;
    font-size:1rem ;
    color: #fff;
    text-align: center;
    padding:5px 5px;
    margin-right: 4px;
}
.main_visual>.counponShow>span:nth-of-type(1){
    background:url('../../assets/images/q1.png') no-repeat;
}
.main_visual>.counponShow>span:nth-of-type(2){
    background:url('../../assets/images/q2.png') no-repeat;
}
.main_visual>.counponShow>span:nth-of-type(3){
    background:url('../../assets/images/q3.png') no-repeat;
}
.main_visual>.all{
    width: 96%;
    height: 2.92rem;
    display: flex;
    justify-content:center;
    padding: 1.25rem 0;
    border-top: solid 1px #EEE;
    margin:0 auto;
}
.main_visual>.all>span{
    width: 48%;
    height: 2.67rem;
    font-size: 14px;
    height: 2.67rem;
    line-height: 2.67rem;
    color: #444;
    padding-left: 4.17rem;

}
.main_visual>.all>.all-pro1{
    background:url('../nine/images/shang.png') no-repeat  30px center;
    background-size: 16px 18px;
    border-right:1px solid #999;
}
.main_visual>.all>.all-pro2{
    background:url('../nine/images/dian.png') no-repeat  30px center;
    background-size: 16px 18px;
}
/*店铺*/
.main_visual>.host{
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    border-top: 1px solid red;
    position: relative;
    background:url(../nine/images/pin.png) no-repeat;
    background-size: 30px 30px;
    left: 0;
    flex-wrap: wrap;
}
.main_visual>.host>.pho{
    width: 4.17rem;
    height: 4.17rem;
    padding-left: 15px;
    padding-top: 10px;
}
.main_visual>.host>.pho>img{
    width: 100%;
    height: 100%;
}
.main_visual>.host>.adress{
    width: 67%;
    height: 4.25rem;
    padding-left:1.67rem;
    padding-top: .83rem;
    margin-bottom: .83rem;
}
.main_visual>.host>.adress>.adr1{
    height: 2.08rem;
    line-height: 2.08rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #444;
    font-size: 1.2rem;
}
.main_visual>.host>.adress>.adr2{
    height: 1.92rem;
    line-height: 1.92rem;
    padding-top: 3px;
    color: #AAA;
    font-size: 1.1rem;
}
.main_visual>.host>.service{
    width:99%;
    padding: 10px;
    margin-bottom: 10px;
}
.main_visual>.host>.service:after{
    content: '';
    height: 0;
    display: block;
    clear: both;
}
.main_visual>.host>.service>li{
    width:33% ;
    height:2.08rem ;
    float: left;
}
.main_visual>.host>.service>li>p{
    height: 2.08rem;
    line-height: 18.75rem5px;
    padding-left: .83rem;
    font-size: 10px;
    color: #444;
    background:url('../nine/images/dui.png') no-repeat left center;
    background-size: 8px 8px;
    text-align: left;
}
.p_buy{
    width: 100%;
    display: flex;
    height: 3.67rem;
    justify-content: space-between;
    border-top: solid 1px #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
}
.p_buy>.tel1{
    width: 33.3%;
    height: 44px;
    text-align: center;
    background-color: #fff;
}

.tel{
    width: 33.3%;
    height: 3.67rem;
    margin-left: 2.92rem;
}
.tel>p{
    color: #AAA;
    line-height: 1.5rem;
    font-size: 1.0rem;
    text-align: center;
}
.tel>.pho2{
    width: 1.67rem;
    height: 1.67rem;
    display: block;
    margin:3px auto;

}
.tel{
    background-color: #fff;
}
.tel>.pho2>img{
    width: 100%;
    height: 100%;
}
.p_buy>.gblue{
    background: #47d2d0;
    color: #FFF;
    line-height: 3.67rem;
    display: block;
    font-size: 16px;
    text-align: center;
    width: 33.3%;
    height: 3.67rem;
}
.p_buy .quick{

    color: #FFF;
    line-height: 3.67rem;
    display: block;
    font-size: 16px;
    text-align: center;

}
.quic{
     width: 33.3%;
    height: 3.67rem;
    background-color:#fe3355;
}
</style>
